<!--
 * @Author: yuqy
 * @Date: 2023-04-10 19:26:39
 * @LastEditors: yuqy
 * @LastEditTime: 2023-10-21 14:15:47
 * @Descripttion: -
-->

<template>
  <div class="wrap" id="home_wrap">
    <div class="header_wrap">
      <h1
        style="-webkit-app-region: drag;"
        v-if="VUE_APP_TYPE=='ODIN'"
      >欧帝双师讲堂 {{ VITE_APP_BASE_URL == 'tic' ?'-BetaVersion':'' }}</h1>
      <h1 style="-webkit-app-region: drag;" v-if="VUE_APP_TYPE=='MID'">音视频互动系统</h1>
      <div class="menu_wrap">
        <div class="menu">
          <Icon
            type="md-remove menu_item"
            @click="close(1);"
            style="margin-right: 10px;"
            v-if="!APP_IS_Web"
          />
          <Icon type="md-menu menu_item" @click="showMenu = !showMenu"/>
          <transition
            leaveActiveClass="animate__fast animate__animated animate__fadeOutRight"
            enterActiveClass="animate__fast animate__animated animate__fadeInRight"
            name="transition"
          >
            <div class="menu_options" v-if="showMenu">
              <span @click="showPerson(); showMenu = false;">
                个人中心
                <Icon type="ios-arrow-forward"/>
              </span>
              <span @click="setRtsp(1)">
                导播管理
                <Icon type="ios-settings"/>
              </span>

              <span @click="deviceTest(1)">
                设备检测
                <Icon type="ios-warning"/>
              </span>

              <span @click="setVideoChoose(1)">
                选择画质
                <Icon type="ios-globe"/>
              </span>

              <span @click="loginOut(1)">
                退出登录
                <Icon type="md-return-left"/>
              </span>
            </div>
          </transition>

          <Icon type="md-close" class="close menu_item" @click="close(2)" v-if="!APP_IS_Web"/>
        </div>
      </div>
      <div class="menu_bg" v-if="showMenu" @click.stop="showMenu = false"/>
    </div>

    <!-- 展示用户预约内容 -->
    <div class="content_wrap" :class="{ 'content_wrap_web': APP_IS_Web}">
      <Row>
        <Col :xs="24" :sm="13" :md="13">
          <!-- 展示预约信息 (有预约的情况下) -->
          <div class="appointment_wrap" v-if="todayList.length > 0">
            <h4>
              <img src="@/assets/img/icon/day_icon.png" alt>
              今日预约 ({{ todayList.length }})
            </h4>
            <div class="appointment_inner">
              <div class="appointment_inner_item" v-for="(item, index) in todayList" :key="index">
                <p>
                  <img src="@/assets/img/icon/school_icon.png" alt>
                  {{ item.schoolName }}
                </p>
                <p>
                  <img src="@/assets/img/icon/teacher_icon.png" alt>
                  {{ item.speakerName }}
                </p>
                <p>
                  <img src="@/assets/img/icon/subject_icon.png" alt>
                  {{ item.subjectName }}
                </p>
                <p style="margin-bottom: 24px;" v-if="item.beginTime">
                  <img src="@/assets/img/icon/time_icon.png" alt>
                  {{ item.beginTime.split(' ')[1] }} - {{ item.endTime.split(' ')[1]}}
                </p>
                <a v-if="item.status <= 1" href="javascript:;" @click.stop="joinRoom(item)">进入课堂</a>
                <a v-else class="a_cancel" href="javascript:;" @click.stop="joinRoom(item)">进入课堂</a>
                <Divider v-if="index < todayList.length - 1"/>
              </div>
            </div>
          </div>
          <div class="appointment_wrap no_data" v-else>
            <img src="@/assets/img/home/nodata.png" alt>
            <br>今日暂无预课程 {{ data.showList }}
          </div>
        </Col>
        <Col :xs="24" :sm="11" :md="11">
          <!-- 放置功能按钮 -->
          <div class="btn_list">
            <div class="btn" @click="creatClass" v-ripple>
              <img src="@/assets/img/home/create.png" alt> 创建课堂
            </div>
            <div class="btn" @click="setJoinModalShow()" v-ripple>
              <img src="@/assets/img/home/add.png" alt> 加入课堂
            </div>
            <div class="btn" @click="setAppoinListShow" v-if="VUE_APP_TYPE=='ODIN'" v-ripple>
              <img src="@/assets/img/home/myyy.png" alt> 我的预约
            </div>
            <div class="btn" style="opacity: 0;" v-else>
              <img src="@/assets/img/home/myyy.png" alt> 我的预约
            </div>
          </div>
        </Col>
      </Row>
      
      <a
        href="javascript:;"
        @click="util.copyAdminWebUrl()"
        v-if="VUE_APP_TYPE=='ODIN'"
        v-ripple
      >请前往https://platform.njodin.com预约课堂 (型号DC-HDS01互动录播软件)</a>
    </div>

    <!-- 加入房间弹框 -->
    <joinModal v-if="data.showJoinModal" ref="joinModalref" />
  </div>
</template>
<script setup>
  import { useStore } from 'vuex'
  import { getAction } from "@/api"
  import { ref, onBeforeMount, reactive, toRefs } from 'vue'
  import { Row, Col, Icon, Message, Divider } from 'view-ui-plus';
  import joinModal from './modal/join.vue';
  import { getStoreModulesMap, getStoreModulesGet } from '@/store/storeMap'
  import util from '@/libs/util'
  import { goHomeSpeaker } from "@/libs/homeredirect"
  const store = useStore() 
  // 复杂变量
  const data = reactive({
    demo: 0,
    demo1: 0,
    showAppoinList: false, // 我的预约弹框显示
    showJoinModal: false, // 加入课堂弹框
  })
  const joinModalref = ref('joinModalref');
  // 解构使用
  const { demo } = toRefs(data);
  // 简单变量
  const todayList = ref([]);
  // 是否显示菜单
  let showMenu = ref(false);
  // 当前日期预约数量
  let listTotal = ref(0);
  // 获取用户信息
  const { userInfo } = getStoreModulesMap('user', ['userInfo'])
  // 获取用户手机号
  const { getUserPhone } = getStoreModulesGet('user', ['getUserPhone'])
  /**
   * @name: 显示我的预约框子
   * @msg: 
   * @return {*}
   */  
  const setAppoinListShow = () => {
    data.showAppoinList = true
  }
  /**
   * @name: 显示我的加入课堂弹框
   * @msg: 
   * @return {*}
   */  
  const setJoinModalShow = async () => {
    if (!data.showJoinModal) return data.showJoinModal = true;
    joinModalref.value.show = true;
  }
  /**
   * @name: 获取今日预览列表
   * @msg: 
   * @param {*} params
   * @return {*}
   */  
  const getAppoinList = async (params) => {
    let { total, list } = await getAction("/whiteboardclient/interaction/appointment/list", params)
    todayList.value = list
    listTotal.value = total
    data.demo = 2
  }
   /**
   * @name: 创建课堂
   * @msg: 
   * @return {*}
   */  
  const creatClass = async () => {
    let speakerPhone = getUserPhone.value;
    let code = await store.dispatch('roomAgora/creatRoom', speakerPhone);
    if (code) goHomeSpeaker(code);
  }
  onBeforeMount(async () => {
    // 获取当天日期内 所有的预约
    let date = util.format(Date.now(), 'yyyy-MM-dd');
    getAppoinList({ date, pageSize: 9999 });
  })
</script>
<style scoped lang="less">
@import url("./less/index.less");
</style>
